<template>
  <div class="messageheader">
      <div class="left">
          {{headerlist[index].title}}
      </div>
      <div class="right">
          <i :class="['iconfont',headerlist[index].icon]"></i>
      </div>
  </div>
</template>

<script>

export default {
    props:{
        headerlist:{
            type:Array,
            default:[]
        },
        index:{
            type:Number,
            default:0
        }
    }
}
</script>

<style lang="less" scoped>

div.messageheader {
    height: 50px;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding: 0 10px;
  div.left {
      font-size: 24px;
  }

  div.right {
    i {
        font-size: 30px;
    }
  }
}

</style>